import * as React from 'react'
import { Layout, Menu, Icon } from 'antd'
import { Link } from 'react-router-dom'
const { Sider } = Layout
const { SubMenu } = Menu
import logo from '../../assets/imgs/logo.png'
import { MenuType } from '../../redux/Types'

import * as style from './index.less'
export interface Props {
  collapsed: boolean
  isMobile: boolean
  menuData: Array<any>
  location?: any
  onCollapse: (flag?: boolean) => void
}

const getIcon = (icon?: string): any => {
  if(icon) {
    if (icon.indexOf('http') === 0) {
      return <img src={icon} alt="icon" className={`${style.icon}`} />
    }else if (icon.indexOf('icon') ===0) {
      return <i className={`${style.icon} anticon ${icon}`}></i>
    }
    return <Icon type={icon} />
  }
  return icon
}

export default class siderMenu extends React.Component<Props, any> {

    // conversion Path
  // 转化路径
  conversionPath = (path?: string): string => {
    if (path && path.indexOf('http') === 0) {
      return path
    } else {
      return `/${path || ''}`.replace(/\/+/g, '/')
    }
  }
  /**
   * 判断是否是http链接.返回 Link 或 a
   * Judge whether it is http link.return a or Link
   * @memberof SiderMenu
   */
  getMenuItemPath = (item: MenuType) => {
    const itemPath = this.conversionPath(item.path)
    const icon = getIcon(item.icon)
    const { target, name } = item;
    // Is it a http link
    if (/^https?:\/\//.test(itemPath)) {
      return (
        <a href={itemPath} target={target}>
          {icon}
          <span>{name}</span>
        </a>
      );
    }
    const { isMobile, onCollapse } = this.props
    return (
      <Link
        to={itemPath}
        target={target}
        replace={`#${itemPath}` === location.hash}
        onClick={
          isMobile
            ? () => {
                onCollapse(true)
              }
            : undefined
        }
      >
        {icon}
        <span>{name}</span>
      </Link>
    )
  }

  /**
   * get SubMenu or Item
   */
  getSubMenuOrItem = (item: MenuType): any => {
    if (item.children && item.children.some(child => child.name!='')) {
      const childrenItems = this.getNavMenuItems(item.children)
      // 当无子菜单时就不展示菜单
      if (childrenItems && childrenItems.length > 0) {
        return (
          <SubMenu
            title={
              item.icon ? (
                <span>
                  {getIcon(item.icon)}
                  <span>{item.name}</span>
                </span>
              ) : (
                item.name
              )
            }
            key={item.id}
          >
            {childrenItems}
          </SubMenu>
        );
      }
      return null
    } else {
      return <Menu.Item key={item.id}>{this.getMenuItemPath(item)}</Menu.Item>
    }
  }
  /**
   * 获得菜单子节点
   * @memberof SiderMenu
   */
  getNavMenuItems = (menusData: Array<MenuType>) => {
    if (!menusData) {
      return []
    }
    return menusData
      .filter(item => item.name && !item.hideInMenu)
      .map(item => {
        const ItemDom = this.getSubMenuOrItem(item)
        // return this.checkPermissionItem(item.authority, ItemDom)
        return ItemDom
      })
      .filter(item => item);
  }
  render() {
    const { onCollapse, collapsed, menuData } = this.props
    
    return (
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        breakpoint="lg"
        onCollapse={onCollapse}
        width={256}
        className={style.sider}
      >
        <div className={style.logo} key="logo">
          <Link to="/">
            <img src={logo} alt="logo" />
            <h1>供应链管理系统</h1>
          </Link>
        </div>
      <Menu
        key="Menu"
        theme="dark"
        mode="inline"
        // {...menuProps}
        // onOpenChange={this.handleOpenChange}
        // selectedKeys={selectedKeys}
        style={{ padding: '16px 0', width: '100%' }}
      >
        {this.getNavMenuItems(menuData)}
      </Menu>
    </Sider>
    );
  }
}